import { useCallback } from "react";
import { useAtomValue } from "jotai";
import { AnimatePresence, m } from "framer-motion";
import { EventTypeColorMaps } from "@/lib/constants";
import { sortedEventsAtom } from "@/store/events";
import { Tooltip } from "shared/components";

export default function EventsInfoBalls() {
  const events = useAtomValue(sortedEventsAtom);

  const handleScrollEventIntoView = useCallback((id: string) => {
    const el = document.getElementById(`event-${id}`);
    if (el) {
      el.scrollIntoView({ block: "start", behavior: "smooth" });
    }
  }, []);

  return (
    <div className="mx-auto min-w-0 flex-auto overflow-hidden overflow-x-auto whitespace-nowrap text-center">
      <AnimatePresence>
        {events.map((event, index) => (
          <Tooltip
            key={event.id}
            className="mx-1"
            content={event.type || "其他"}
            placement="bottom"
            placementOffset={10}
            contentClassName="text-xs text-[#5D6C6A]"
          >
            <m.button
              layout
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              // exit={{ opacity: 0 }}
              // transition={{ delay: index * 0.05 }}
              style={{
                color:
                  EventTypeColorMaps[event.type] || EventTypeColorMaps["其他"],
              }}
              onClick={() => handleScrollEventIntoView(event.id)}
              className="inline-block size-4 rounded-full bg-current"
            />
          </Tooltip>
        ))}
      </AnimatePresence>
    </div>
  );
}
